<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影院</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="active  my-color item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>
<div class="ui grid container">
    <div class="row second_brade">
        <div class="ten wide column">
            <a th:href="@{/}">首页</a> ><a th:href="@{/cinemaList}">影院</a>  > 杭州
        </div>
        <div class="six wide column">
            3步轻松购票:1.选座购票->买券2.收电子码->3.影院取票
        </div>
    </div>
</div>
<div class="ui grid container">
    <div class="ten wide column all_movie_div">
        <div class="ui grid cinema_area">
            <div class="row remove_padding">
                <div class="three wide column bg_color_red_medium ">
                    <div class="text_center_gray">
                        选择区域
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="selected">
                    <a class="area_a select" th:href="@{/cinemaList}">全部区域</a>

                    <a class='area_a' th:each="area:${areas}" th:onclick='|javascript:select_area(${area.id},this)|' th:text="${area.name}"></a>


                </div>
            </div>
            <div class="row remove_padding">
                <div class="three wide column bg_color_red_medium">
                    <div class="text_center_gray">
                        搜索
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding">
                    <input type="text" class="search" placeholder="请输入影院名称/关键字">
                    <button class="search_btn" onclick="search()">搜索</button>
                </div>
            </div>
        </div>
        <div class="cinema_list">

            <a th:each="cinema:${cinemas}" th:href='@{/cinemaDetail/{id}(id=${cinema.id})}' class='item_a'>
                <div class='cinema_item item'><div class='ui grid'>
            <div class='three wide column'><img width='100' height='100' th:src='@{${cinema.image}}' ></div>
            <div class='ten wide column'><div class='row item_name' th:text="${cinema.name}">name']</div>
                <div class='row item_address'>地址：<span th:text="${cinema.address}"></span></div>
                <div class='row item_telephone'>电话：<span th:text="${cinema.telephone}"></span></div>
                <div class='row'>更多：影院服务  交通信息</div></div>
            <div class='three wide column'><div>评分：<span style='color: red;' th:text="${cinema.grade}">grade</span></div>
                <div class='select_seat'>选座</div></div>
            </div></div>
            </a>

        </div>
        <div class="load_more row">
            <div onclick="loadMore()">点击显示更多 <i class="arrow down icon"></i></div>
        </div>
    </div>
    <div class="six wide column remove_padding">
        <div class="ui basic secondary vertical segment segment_border add_padding">
            <div class="ui  secondary pointing  segment menu remove_padding">
                <div class="item font_size_medium">
                    热销团购券
                </div>
                <div class="right item">
                    <a href="#" style="color: red">查看全部 ></a>
                </div>
            </div>
            <div class="error">
                <div class="title">暂无团购信息</div>
                你可以查看 <a th:href="@{/cinemaList}">全部影院</a>或者 <a th:href="@{/movieList}">全部影片</a>
            </div>
        </div>
    </div>
    <script>
        let id1=0;
        let number=2;
        function select_area(id,e) {
            console.log(id);
            id1=id;
            $('#selected').find("a").each(function () {
                let me = $(this);
                let bool = me.attr("class").indexOf("select");
                if (bool!=-1) {
                    me.removeClass("select");
                }
            })
            $(e).addClass('select');
            $.ajax({
                url:'http://localhost:8080/cinema_area',
                method:'get',
                data:{id:id},
                dataType:'json',
                success:function (res) {
                    $('.cinema_list').empty();
                    let data=res.data;
                    data.forEach(function (item) {
                        let element="<a href='/cinemaDetail/"+item['id']+
                            "' class='item_a'><div class='cinema_item item'><div class='ui grid'>"+
                            "<div class='three wide column'><img width='100' height='100' src='"+item['image']+"' ></div>"+
                            "<div class='ten wide column'><div class='row item_name'>"+item['name']+
                            "</div><div class='row item_address'>地址："+item['address']+
                            "</div><div class='row item_telephone'>电话："+item['telephone']+
                            "</div><div class='row'>更多：影院服务  交通信息</div></div>"+
                            "<div class='three wide column'><div>评分：<span style='color: red;'>"+ item['grade']+
                            "</span></div><div class='select_seat'>选座</div></div></div></div></a>";
                        $('.cinema_list').append(element);
                    })
                }
            })
        }
        function loadMore() {
            $.ajax({
                url:'http://localhost:8080/loadMore',
                method: 'get',
                data: {id:id1,number:number},
                dataType: 'json',
                success:function (res) {

                    let data = res.data;
                    data.forEach(function (item) {
                        let element = "<a href='/cinemaDetail/" + item['id'] +
                            "' class='item_a'><div class='cinema_item item'><div class='ui grid'>" +
                            "<div class='three wide column'><img width='100' height='100' src='" + item['image'] + "' ></div>" +
                            "<div class='ten wide column'><div class='row item_name'>" + item['name'] +
                            "</div><div class='row item_address'>地址：" + item['address'] +
                            "</div><div class='row item_telephone'>电话：" + item['telephone'] +
                            "</div><div class='row'>更多：影院服务  交通信息</div></div>" +
                            "<div class='three wide column'><div>评分：<span style='color: red;'>" + item['grade'] +
                            "</span></div><div class='select_seat'>选座</div></div></div></div></a>";
                        $('.cinema_list').append(element);
                    })
                }
            })
            number+=1;
        }
        function search() {
            let content=$('.search').val();
            $.ajax({
                url:'http://localhost:8080/searchCinema',
                method:'get',
                data:{content:content},
                dataType:'json',
                success:function (res) {
                    $('.cinema_list').empty();
                    let data = res.data;
                    data.forEach(function (item) {
                        let element = "<a href='/cinemaDetail/" + item['id'] +
                            "' class='item_a'><div class='cinema_item item'><div class='ui grid'>" +
                            "<div class='three wide column'><img width='100' height='100' src='" + item['image'] + "' ></div>" +
                            "<div class='ten wide column'><div class='row item_name'>" + item['name'] +
                            "</div><div class='row item_address'>地址：" + item['address'] +
                            "</div><div class='row item_telephone'>电话：" + item['telephone'] +
                            "</div><div class='row'>更多：影院服务  交通信息</div></div>" +
                            "<div class='three wide column'><div>评分：<span style='color: red;'>" + item['grade'] +
                            "</span></div><div class='select_seat'>选座</div></div></div></div></a>";
                        $('.cinema_list').append(element);
                    })
                    console.log(res);
                }
            })
        }
    </script>
</body>
</html>